<template>
	<view class="columnY container">
		<view class="login-center">
			<view class="form-top pad-left-right-60 flex pad-top-24">
				<view class="flex mar-top-42">
					<view class="font-32">欢迎使用</view>
					<view class="font-30 mar-left-10">成都市武侯区机投自来水经营服务站</view>
				</view>
			</view>

			<view class="pad-30 font-34">
				<view class="pad-30 bg-white radius20">
					<up-form labelWidth="200" labelPosition="top" :model="formData" :rules="rules" ref="ruleFrom">
						<!-- 账号 -->
						<up-form-item label="账号" prop="tel" borderBottom="true">
							<up-input type="number" clearable placeholderClass="input-style" placeholder="请输入手机号"
								v-model="formData.tel" border="none"></up-input>
						</up-form-item>
						<!-- 验证码 -->
						<up-form-item v-if="!isLoginType" label="验证码" prop="sms_code" class="mar-top-40"
							borderBottom="true">
							<up-input type="number" clearable placeholderClass="input-style" placeholder="请输入验证码"
								v-model="formData.sms_code" border="none">
								<template #suffix>
									<text v-if="codeTime == 60" @click="hanldeCode" type="primary" color="#000000"
										:customStyle="{width: '300rpx'}">获取验证码</text>
									<text v-else type="primary" :plain="true" color="#000000"
										:customStyle="{width: '300rpx'}">{{ codeText }}</text>
								</template>
							</up-input>
						</up-form-item>
						<!-- 密码 -->
						<up-form-item v-else label="密码" prop="login_secret" class="mar-top-40" borderBottom="true">
							<up-input v-if="showPassword" clearable type="text" placeholderClass="input-style"
								placeholder="请输入密码" v-model="formData.login_secret" border="none">
								<template #suffix>
									<up-icon color="#888888" size="20" class="icon" @click="changePassword"
										:name="showPassword ? 'eye-fill' : 'eye-off'" />
								</template>
							</up-input>

							<up-input v-else clearable type="password" placeholderClass="input-style"
								placeholder="请输入密码" v-model="formData.login_secret" border="none">
								<template #suffix>
									<up-icon color="#888888" size="20" class="icon" @click="changePassword"
										:name="showPassword ? 'eye-fill' : 'eye-off'" />
								</template>
							</up-input>
						</up-form-item>
					</up-form>
					<view @click="isLoginType = !isLoginType" class="color-primary font-26 mar-top-20">
						{{isLoginType? '验证码登录': '密码登录'}}
					</view>
				</view>

				<view class="login-buttom pad-30">
					<up-button :customStyle="customStyle" class="font-32 mar-top-10" shape="circle"
						@click="submit">登录</up-button>
					<view class="mar-top-120">
						<agreement @hanldeCheckbox="hanldeCheckbox" :checkbox="checkbox"></agreement>
					</view>
					<!-- <view>
						<view @click="hanldeRegister" class="text-center mar-top-80 font-28">
							没有账号去，<text class="color-primary">注册</text></view>
					</view> -->
				</view>
			</view>
		</view>
		<my-popup title="服务协议与隐私协议" content="为保证您的合法权益,请阅读同意《服务协议》和《隐私协议》" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { postLoginSms, postSendCode, postLogin } from '@/api/currency.js';

	// 登录数据
	const formData = reactive({
		tel: '',
		login_secret: '',
		sms_code: '',
	})

	const customStyle = ref({
		background: "#0099DE",
		color: "white",
		height: "100rpx"
	})

	const checkbox = ref(false);
	const regionalPhoneVisibel = ref(false)
	const ruleFrom = ref(null)
	// 表单校验规则
	const rules = ref({
		tel: [{
			required: true,
			message: '请输入手机号',
			trigger: 'blur'
		}],
		login_secret: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			},
			{
				min: 6,
				message: '密码最少6位',
				trigger: 'blur'
			}
		],
		sms_code: [{
			required: true,
			message: '请输入短信验证码',
			trigger: 'blur'
		}]
	})

	// 协议
	const hanldeCheckbox = (event) => {
		checkbox.value = !checkbox.value;
	}

	// 确定勾选
	const isPopup = ref(false);
	const hanldeConfirm = () => {
		checkbox.value = true;
		isPopup.value = false;
		submit();
	}

	// 切换登录方式
	const isLoginType = ref(false);
	// 获取验证
	let codeTime = ref(60);
	let codeText = ref(`获取验证码`);
	let inter = ref(null);
	const hanldeCode = async () => {
		if (formData.tel == "") {
			uni.showToast({
				title: '手机号不能为空',
				icon: 'none'
			})
			return
		}
		const res = await postSendCode({
			tel: formData.tel,
			scene: 23
		})

		if (res.code == 200) {
			clearInterval(inter.value);
			codeTime.value -= 1;
			codeText.value = `${codeTime.value}秒重新获取`;
			inter.value = setInterval(() => {
				codeTime.value -= 1
				codeText.value = `${codeTime.value}秒重新获取`;
				// 倒计时完成
				if (codeTime.value <= 0) {
					codeTime.value = `获取验证码`;
					codeTime.value = 60;
					clearInterval(inter.value);
				}
			}, 1000);
		}
	}

	// 登录
	const submit = async () => {
		ruleFrom.value.validate().then(async valid => {
			if (valid) {
				if (!checkbox.value) {
					isPopup.value = true;
					return
				}
				
				// 密码登录
				if (isLoginType.value) {
					const res = await postLogin(formData);
					if (res.code === 200) {
						uni.$u.toast('登录成功');
						// 储存token
						uni.setStorageSync('jwt_token', res.data.jwt);
						uni.setStorageSync('refresh_token', res.data.refresh_token);
						uni.setStorageSync('loginStatus', 'user');

						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				} else {
					const sms = await postLoginSms(formData);
					if (sms.code === 200) {
						uni.$u.toast('登录成功');
						// 储存token
						uni.setStorageSync('jwt_token', sms.data.jwt);
						uni.setStorageSync('refresh_token', sms.data.refresh_token);
						uni.setStorageSync('loginStatus', 'user');

						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				}


			}
		}).catch(error => {
			console.log('失败:', error);
		})
	}

	// 跳转注册
	const hanldeRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}

	// 查看密码
	let showPassword = ref(false);
	const changePassword = () => {
		showPassword.value = !showPassword.value;
	}

	const hanldeChoice = () => {
		uni.navigateTo({
			url: '/pages/locale/locale'
		})
	}
</script>

<style scoped>
	.container {
		background-color: #F7F8FA;
		min-height: 100vh;
	}

	.login-center {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/e00255645bcebf36cd7311f320854e7d.png');
		background-repeat: no-repeat;
		background-size: 100% 526rpx;
	}

	.logo {
		display: block;
		width: 245rpx;
		height: 231rpx;
	}

	:deep(.u-form-item) {
		margin-top: 40rpx !important;
	}

	.input-style {
		color: #FFFFFF;
	}
</style>